import type { Theme } from '@/config/theme'
import { defineStore } from 'pinia'

import {
  addThemeTransition,
  ANIMATION_CONFIG,
  applyCSSVariables,
  DEFAULT_THEME_CONFIG,
  getThemeVariables,
  setThemeAttribute,
} from '@/config/theme'
import { isTabBarPage } from '@/router/config'

// 导出Theme类型供其他文件使用
export type { Theme }

// 主题状态接口
export interface ThemeState {
  theme: Theme
  isDark: boolean
  primaryColor: string
  customColors: Record<string, string>
  _applyThemeTimer?: number | null
}

export const useThemeStore = defineStore('theme', {
  state: (): ThemeState => ({
    theme: DEFAULT_THEME_CONFIG.theme,
    isDark: false,
    primaryColor: DEFAULT_THEME_CONFIG.primaryColor,
    customColors: { ...DEFAULT_THEME_CONFIG.customColors },
    _applyThemeTimer: null,
  }),

  getters: {
    // 获取当前主题模式
    currentTheme: (state): Theme => state.theme,

    // 是否为深色模式
    isDarkMode: (state): boolean => state.isDark,

    // 获取主色调
    getPrimaryColor: (state): string => state.primaryColor,

    // 获取自定义颜色
    getCustomColor: state => (colorName: string): string => {
      return state.customColors[colorName] || state.primaryColor
    },

    // 获取主题样式变量
    themeVars: (state): Record<string, string> => {
      return getThemeVariables(state.isDark, state.primaryColor, state.customColors)
    },
  },

  actions: {
    // 设置主题
    setTheme(theme: Theme) {
      this.theme = theme
      this.updateDarkMode()
      console.log('主题已设置为:', theme)
    },

    // 切换主题
    toggleTheme() {
      const themes: Theme[] = ['light', 'dark', 'auto']
      const currentIndex = themes.indexOf(this.theme)
      const nextTheme = themes[(currentIndex + 1) % themes.length]
      this.setTheme(nextTheme)
    },

    // 更新深色模式状态
    updateDarkMode() {
      if (this.theme === 'auto') {
        // 根据系统主题自动判断
        this.isDark = this.getSystemDarkMode()
      }
      else {
        this.isDark = this.theme === 'dark'
      }

      // 应用主题到页面
      this.applyThemeToPage()
    },

    // 获取系统深色模式状态
    getSystemDarkMode(): boolean {
      try {
        const systemInfo = uni.getSystemInfoSync()
        return systemInfo.theme === 'dark'
      }
      catch {
        // 如果获取失败，默认为浅色模式
        return false
      }
    },

    // 设置主色调
    setPrimaryColor(color: string) {
      this.primaryColor = color
      this.customColors.primary = color
      // 立即应用主题变更
      this.applyThemeToPage()

      // 开发环境输出日志
      if (import.meta.env.DEV) {
        console.log('主色调已设置为:', color)
      }
    },

    // 设置自定义颜色
    setCustomColor(colorName: string, color: string) {
      this.customColors[colorName] = color
      this.applyThemeToPage()
      console.log(`自定义颜色 ${colorName} 已设置为:`, color)
    },

    // 批量设置自定义颜色
    setCustomColors(colors: Record<string, string>) {
      this.customColors = { ...this.customColors, ...colors }
      this.applyThemeToPage()
      console.log('自定义颜色已批量设置:', colors)
    },

    // 应用主题到页面（带防抖优化）
    applyThemeToPage() {
      // 防抖处理，避免频繁调用
      if (this._applyThemeTimer) {
        clearTimeout(this._applyThemeTimer)
      }

      this._applyThemeTimer = setTimeout(() => {
        try {
          // H5 环境下设置 CSS 变量和主题属性
          // #ifdef H5
          if (typeof document !== 'undefined') {
            // 设置主题属性
            setThemeAttribute(this.isDark)

            // 应用CSS变量
            applyCSSVariables(this.themeVars)

            // 设置 body 背景色
            document.body.style.backgroundColor = this.themeVars['--bg-color']

            // 添加过渡动画
            addThemeTransition()
          }
          // #endif

          // 小程序环境下设置页面样式
          // #ifdef MP
          this.applyMiniProgramTheme()
          // #endif

          // App环境下设置页面样式
          // #ifdef APP
          this.applyAppTheme()
          // #endif

          // 开发环境下输出调试信息
          if (import.meta.env.DEV) {
            console.log('主题已应用到页面:', {
              theme: this.theme,
              isDark: this.isDark,
              primaryColor: this.primaryColor,
              variables: `${Object.keys(this.themeVars).length}个CSS变量`,
            })
          }
        }
        catch (error) {
          console.error('应用主题失败:', error)
        }
      }, ANIMATION_CONFIG.debounceDelay)
    },

    // 小程序专用主题应用方法
    applyMiniProgramTheme() {
      try {
        // 获取当前主题变量
        const themeVars = getThemeVariables(this.isDark, this.primaryColor, this.customColors)

        // 设置导航栏样式
        uni.setNavigationBarColor({
          frontColor: this.isDark ? '#ffffff' : '#000000',
          backgroundColor: this.isDark ? '#1a1a1a' : '#ffffff',
          animation: {
            duration: ANIMATION_CONFIG.duration,
            timingFunc: 'easeInOut',
          },
        })

        // 设置页面背景色（解决回弹区域白色背景问题）
        if (uni.setBackgroundColor) {
          uni.setBackgroundColor({
            backgroundColor: themeVars['--page-bg'] || (this.isDark ? '#1a1a1a' : '#f8f8f8'),
            backgroundColorTop: themeVars['--page-bg'] || (this.isDark ? '#1a1a1a' : '#f8f8f8'),
            backgroundColorBottom: themeVars['--page-bg'] || (this.isDark ? '#1a1a1a' : '#f8f8f8'),
          })
        }

        // 获取当前页面路径
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const currentRoute = currentPage ? `/${currentPage.route}` : ''

        // 只在 TabBar 页面中设置 TabBar 样式
        if (uni.setTabBarStyle && currentRoute && isTabBarPage(currentRoute)) {
          uni.setTabBarStyle({
            color: this.isDark ? '#cccccc' : '#999999',
            selectedColor: this.primaryColor,
            backgroundColor: this.isDark ? '#1a1a1a' : '#ffffff',
            borderStyle: this.isDark ? 'white' : 'black',
          })
        }

        // 强制触发页面重新渲染
        this.triggerPageUpdate()

        if (import.meta.env.DEV) {
          console.log('小程序主题已应用:', {
            isDark: this.isDark,
            primaryColor: this.primaryColor,
            currentRoute,
            isTabBarPage: currentRoute ? isTabBarPage(currentRoute) : false,
            backgroundColor: themeVars['--page-bg'],
          })
        }
      }
      catch (mpError) {
        console.warn('小程序主题设置失败:', mpError)
      }
    },

    // App专用主题应用方法
    applyAppTheme() {
      try {
        // 设置状态栏样式
        // #ifdef APP-PLUS
        plus.navigator.setStatusBarStyle(this.isDark ? 'light' : 'dark')
        // #endif

        // 设置导航栏样式
        uni.setNavigationBarColor({
          frontColor: this.isDark ? '#ffffff' : '#000000',
          backgroundColor: this.isDark ? '#1a1a1a' : '#ffffff',
          animation: {
            duration: ANIMATION_CONFIG.duration,
            timingFunc: 'easeInOut',
          },
        })

        // 强制触发页面更新
        this.triggerPageUpdate()

        if (import.meta.env.DEV) {
          console.log('App主题已应用:', {
            isDark: this.isDark,
            primaryColor: this.primaryColor,
          })
        }
      }
      catch (appError) {
        console.warn('App主题设置失败:', appError)
      }
    },

    // 强制触发页面更新
    triggerPageUpdate() {
      // 发送全局事件，让页面组件自行监听并更新
      uni.$emit('theme-changed', {
        theme: this.theme,
        isDark: this.isDark,
        primaryColor: this.primaryColor,
        themeVars: this.themeVars,
      })

      // 尝试强制更新当前页面
      try {
        const pages = getCurrentPages()
        if (pages && pages.length > 0) {
          const currentPage = pages[pages.length - 1]
          if (currentPage && currentPage.$vm && currentPage.$vm.$forceUpdate) {
            // Vue2语法兼容
            currentPage.$vm.$forceUpdate()
          }
        }
      }
      catch (e) {
        // 忽略错误，使用事件机制作为备用方案
        if (import.meta.env.DEV) {
          console.log('强制更新页面失败，使用事件机制:', e)
        }
      }
    },

    // 重置主题设置
    resetTheme() {
      this.theme = DEFAULT_THEME_CONFIG.theme
      this.primaryColor = DEFAULT_THEME_CONFIG.primaryColor
      this.customColors = { ...DEFAULT_THEME_CONFIG.customColors }
      this.updateDarkMode()

      if (import.meta.env.DEV) {
        console.log('主题设置已重置')
      }
    },

    // 监听系统主题变化
    watchSystemTheme() {
      if (this.theme === 'auto') {
        // 在支持的环境下监听系统主题变化
        try {
          // H5 环境
          if (typeof window !== 'undefined' && window.matchMedia) {
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
            const handleChange = (e: MediaQueryListEvent) => {
              if (this.theme === 'auto') {
                this.isDark = e.matches
                this.applyThemeToPage()
              }
            }

            mediaQuery.addEventListener('change', handleChange)
            return () => mediaQuery.removeEventListener('change', handleChange)
          }
        }
        catch (error) {
          console.warn('监听系统主题变化失败:', error)
        }
      }
    },

    // 初始化主题
    initTheme() {
      this.updateDarkMode()
      this.watchSystemTheme()
      console.log('主题已初始化')
    },
  },

  // 持久化配置
  persist: true,
})
